<template>
	<view>
		<searchNav @customevent="handleEvent" />
		<view class="article-page">
			<view class="article-conter">
				<view class="article-taba">
					<u-tabs :list="list1" keyName='title' :inactiveStyle="inactiveStyle" :activeStyle="activeStyle" :lineColor="'#ff3738'" :itemStyle="itemStyle" @click="clicktabs"></u-tabs>
				</view>
				<view style="padding: 10px 0px; border-bottom: 1px solid rgb(238, 238, 238)">
					<view style="display: flex; align-items: center" v-if="list1[0]">
						<image
							style="border-radius: 10px; width: 100%; height: 165px"
							:src="list1[0].imgUrl"
							mode=""
						></image>
					</view>
				</view>
			</view>
			<u-list @scrolltolower="scrolltolower" height="300px">
				<u-list-item v-for="(item, index) in listDetail" :key="item.id">
					<view
						@click="$Router.push({ path: '/pages/article/article_detail', query: { id: item.id } })"
						style="padding: 10px 0px; border-bottom: 1px solid rgb(238, 238, 238)"
					>
						<view style="display: flex; align-items: center">
							<view style="flex: 1 1 0%; margin-right: 10px">
								<view class="line-clamp2">
									<text class="txta">{{ $t("article.a0") }}</text>
									{{ item.title }}
								</view>
								<view class="line-clamp3">
									<text style="color: rgb(255, 44, 24); margin-right: 10px">{{$t("article.a1")}}</text>
									<text style="margin-right: 25px">{{$t("article.a2")}}</text>
									<!-- <text>{{ item.createTime }}</text> -->
								</view>
							</view>
							<image style="border-radius: 6px; width: 110px; height: 80px" :src="item.imgUrl" mode=""></image>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>

		<FooterNav :modelKey="4" />
	</view>
</template>
<script>
import searchNav from './components/searchNav.vue';

import { homeSetterlist } from '@/api/index.js';
export default {
	components: {
		searchNav
	},
	props: {},
	data() {
		return {
			itemStyle: {
				height: '50px'
			},
			inactiveStyle: {
				color: '#646566',
				fontSize: '13px',
				fontWeight: '600'
			},
			activeStyle: {
				color: '#f04045',
				fontSize: '14px',
				fontWeight: '600'
			},
			list1: [],
			listDetail: [],
			pageNum: 1, //：当前页码
			pageSize: 10, //：每页的数据条数。
			hasMore: true, // 是否还有更多数据
			loading: false, // 加载状态
			total: 100
		};
	},
	watch: {},
	computed: {},
	onShow() {
		this.greenLsit();
		this.init();
	},
	methods: {
		handleEvent(payload) {
			// 接收子组件传递的参数
			console.log('子组件传递的参数:', payload);
			this.listDetail = [];
			this.pageNum = 1;
			this.pageSize = 10;
			this.init(payload);
		},
		async greenLsit(){
			let obj = {
				title: '',
				green:1,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			};
			let res = await homeSetterlist(obj);
			this.list1.push(res.data[0]);
		},
		async init(payload) {
			if (this.loading) return; // 避免重复加载或无数据时加载
			this.loading = true; // 设置加载状态
			try {
				let obj = {
					title: payload,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				let res = await homeSetterlist(obj);
				// this.listDetail = res.data;
				const data = res.data || {};
				const items = data || []; // 获取新数据
				this.listDetail = [...this.listDetail, ...items]; // 合并新数据到列表
				this.pageNum++; // 页码自增
			} catch (error) {
				console.error('数据加载失败:', error);
			} finally {
				this.loading = false; // 加载完成
			}
		},
		scrolltolower() {
			this.init();
		},
		clicktabs(e) {
			console.log(e, 'eee');
		}
	}
};
</script>
<style lang="scss" scoped>
.article-page {
	padding: 0 15px;
	padding-top: 50px;
	.article-taba {
	}
	.line-clamp2 {
		font-size: 14px;
		height: 50px;
		line-height: 25px;
		color: rgb(0, 0, 0);
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		.txta {
			font-size: 10px;
			background: rgb(240, 64, 69);
			color: rgb(255, 255, 255);
			border-radius: 3px;
			font-weight: bold;
			padding: 2px 4px;
			margin-right: 5px;
		}
	}
	.line-clamp3 {
		display: flex;
		align-items: center;
		color: rgb(102, 102, 102);
		font-size: 10px;
		height: 20px;
		margin-top: 15px;
	}
}
</style>
